﻿import React, {Component} from 'react';
import {connect} from 'react-redux';
import actiion from '../../store/actions/dataCenter';
import PerformanceDisplay from './components/PerformanceDisplay';
import MapofChina from './components/MapofChina';
import PieChart from './components/PieChart';
import './DataCenter.scss';

class DataCenter extends Component {
  state = {
    // 标签
    PerformDisplay: {
      allprice: this.props.allprice,
      cate: this.props.cate,
      goodsnum: this.props.goodsnum,
      brand: this.props.brand,
      registcount: this.props.registcount,
      realsales: this.props.realsales,
      backsales: this.props.backsales
    },
    // 地图
    optionMap: {
      tooltip: {
        // triggerOn: 'click',
      },
      visualMap: {
        min: 0,
        max: 1000,
        left: 60,
        bottom: 10,
        showLabel: !0,
        text: ['访问热区', '访问冷区'],
        pieces: [{
          gt: 1000,
          label: '> 1000 人',
          color: '#f80909'
        },{
          gte: 100,
          lt: 1000,
          label: '100 - 1000 人',
          color: '#e37e96'
        }, {
          gte: 10,
          lt: 100,
          label: '10 - 100 人',
          color: '#e37d2a'
        }, {
          gte: 5,
          lt: 10,
          label: '5 - 50 人',
          color: '#31bfc4'
        }, {
          gte: 1,
          lt: 5,
          label: '1 - 5 人',
          color: '#43ce59'
        }, {
          value: 0,
          color: '#ffffff'
        }],
        show: !0
      },
      geo: {
        map: 'china',
        roam: !1,
        scaleLimit: {
          min: 1,
          max: 2
        },
        zoom: 1.23,
        top: 75,
        label: {
          normal: {
            show: !0,
            fontSize: '12',
            color: 'rgba(0,0,0,0.7)'
          }
        },
        itemStyle: {
          normal: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.2)',
            borderColor: 'rgba(0, 0, 0, 0.2)'
          },
          emphasis: {
            areaColor: 'rgba(248,241,215,0.77)',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            borderWidth: 1
          }
        }
      },
      series: [{
        name: '访问人数',
        type: 'map',
        geoIndex: 0,
        data: []
      }]
    },
    series: [{
      name: '访问人数',
      type: 'map',
      geoIndex: 0,
      data: []
    }],
    // 饼状图
    optionPieChart: {
      title: {
        text: '成交统计',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        type: 'scroll',
        orient: 'vertical',
        right: 'right',
        // bottom:'bottom',
        selected: {}

      },
      series: [
        {
          name: '采购公司：',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
  };

  mapDataCollation() {
    const {province} = this.props;
    const data = province.map(item => {
      return {
        name: item.name,
        value: item.value
      };
    });
    const series = [];
    series.push({
      ...this.state.series[0],
      data
    });
    const optionMap = {
      ...this.state.optionMap,
      series
    };
    const PerformDisplay = {
      allprice: this.props.allprice,
      cate: this.props.cate,
      goodsnum: this.props.goodsnum,
      brand: this.props.brand,
      registcount: this.props.registcount,
      realsales: this.props.realsales,
      backsales: this.props.backsales
    };
    this.setState({
      optionMap,
      PerformDisplay
    });

  }

  PieChartCollation() {
    const {companyData} = this.props;
    console.log(companyData);
    // legend-->selected  series-->data
    const selected = {};
    const data = companyData.map((item, index) => {
      if (index > 5 || index === 0) {
        selected[item.name] = 0;
      }
      return {
        value: item.value,
        name: item.name
      };
    });
    const legend = {
      ...this.state.optionPieChart.legend,
      selected
    };
    const series = [{
      ...this.state.optionPieChart.series[0],
      data
    }];
    const optionPieChart = {
      ...this.state.optionPieChart,
      legend,
      series
    };

    console.log(optionPieChart);
    this.setState({
      optionPieChart
    });
  }

  async initPage() {
    await this.props.GET_DATA_CENTER();
    this.mapDataCollation();
    this.PieChartCollation();
  }

  componentDidMount() {
    this.initPage();
  }

  render() {
    return (
      <div className={'dataCenter'}>
        <PerformanceDisplay {...this.state.PerformDisplay}/>
        <div className={'statistics'}>
          <div className={'map'}>
            <MapofChina option={this.state.optionMap}/>
          </div>
          <div className={'pieChart'}>
            <PieChart option={this.state.optionPieChart}/>
          </div>
        </div>

      </div>
    );
  }
}

const mapStateToProps = state => state.dataCenter;

export default connect(mapStateToProps, actiion)(DataCenter);